<template >
    <!-- 头部工具栏 -->
    <ul class="markdown-toolbars" v-show="!preview">
        <li>
            <slot name="title"/>
        </li>
        <li v-if="tools.undo" name="撤销">
            <span class="iconfont icon-undo" @click="editor.undo()"></span>
        </li>
        <li v-if="tools.redo" name="重做" @click="redo">
            <span class="iconfont icon-redo"></span>
        </li>
        <li v-if="tools.strong" name="粗体">
            <span @click="insertStrong" class="iconfont icon-bold"></span>
        </li>
        <li v-if="tools.italic" name="斜体">
            <span @click="insertItalic" class="iconfont icon-italic"></span>
        </li>
        <li v-if="tools.overline" name="删除线">
                <span
                        @click="insertOverline"
                        class="iconfont icon-overline"
                ></span>
        </li>
        <li v-if="tools.overline" name="下划线">
                <span
                        @click="insertUnderline"
                        class="iconfont icon-under-line"
                ></span>
        </li>
        <li v-if="tools.h1" name="标题1">
            <span style="font-size: 16px;" @click="insertTitle(1)">h1</span>
        </li>
        <li v-if="tools.h2" name="标题2">
            <span style="font-size: 16px;" @click="insertTitle(2)">h2</span>
        </li>
        <li v-if="tools.h3" name="标题3">
            <span style="font-size: 16px;" @click="insertTitle(3)">h3</span>
        </li>
        <li v-if="tools.h4" name="标题4">
            <span style="font-size: 16px;" @click="insertTitle(4)">h4</span>
        </li>
        <li v-if="tools.h5" name="标题5">
            <span style="font-size: 16px;" @click="insertTitle(5)">h5</span>
        </li>
        <li v-if="tools.h6" name="标题6">
            <span style="font-size: 16px;" @click="insertTitle(6)">h6</span>
        </li>
        <li v-if="tools.hr" name="分割线">
                <span
                        @click="insertLine"
                        class="iconfont icon-horizontal"
                ></span>
        </li>
        <li v-if="tools.quote" name="引用">
                <span
                        style="font-size: 16px;"
                        @click="insertQuote"
                        class="iconfont icon-quote"
                ></span>
        </li>
        <li v-if="tools.ul" name="无序列表">
            <span @click="insertUl" class="iconfont icon-ul"></span>
        </li>
        <li v-if="tools.ol" name="有序列表">
            <span @click="insertOl" class="iconfont icon-ol"></span>
        </li>
        <li v-if="tools.code" name="代码块">
            <span @click="insertCode" class="iconfont icon-code"></span>
        </li>
        <li v-if="tools.notChecked" name="未完成列表">
                <span
                        @click="insertNotFinished"
                        class="iconfont icon-checked-false"
                ></span>
        </li>
        <li v-if="tools.checked" name="已完成列表">
                <span
                        @click="insertFinished"
                        class="iconfont icon-checked"
                ></span>
        </li>
        <li v-if="tools.link" name="链接">
            <span @click="insertLink" class="iconfont icon-link"></span>
        </li>
        <li v-if="tools.image" name="图片">
            <span @click="insertImage" class="iconfont icon-img"></span>
        </li>
        <li v-if="tools.uploadImage" name="本地图片">
            <span @click="chooseImage" class="iconfont icon-upload-img"></span>
        </li>
        <li v-if="tools.table" name="表格">
            <span @click="insertTable" class="iconfont icon-table"></span>
        </li>
        <li name="导入MD文件" class="import-file" v-show="tools.importmd">
            <span class="iconfont icon-daoru" @click="importFile"></span>
            <input
                    type="file"
                    @change="importFile($event)"
                    accept="text/markdown"
            />
        </li>
        <li name="导入word" class="import-file" v-show="tools.importword">
                <span  @click="importDoc" style="margin-top:5px">
                    <svg t="1595733452037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3019" width="15" height="15"><path d="M847.644444 1024H150.755556c-48.355556-5.688889-88.177778-45.511111-93.866667-93.866667V85.333333C59.733333 39.822222 96.711111 2.844444 139.377778 0h475.022222l327.111111 327.111111v605.866667c-5.688889 45.511111-45.511111 85.333333-93.866667 91.022222z m0-696.888889h-184.888888c-25.6-2.844444-42.666667-22.755556-45.511112-45.511111V93.866667H196.266667c-25.6 0-45.511111 19.911111-45.511111 45.511111v745.244444c5.688889 22.755556 22.755556 42.666667 45.511111 45.511111h605.866666c25.6-2.844444 45.511111-22.755556 45.511111-45.511111V327.111111zM557.511111 836.266667l-59.733333-275.911111-65.422222 275.911111h-93.866667L241.777778 372.622222h96.711111l51.2 287.288889L455.111111 372.622222h91.022222l56.888889 287.288889 42.666667-204.8h-36.977778v-82.488889h145.066667l-110.933334 463.644445h-85.333333z" fill="#666666" p-id="3020"></path></svg>
                </span>
            <input
                    type="file"
                    @change="importDoc($event)"
            />
        </li>


        <li name="解析sql" v-show="tools.sql">
                <span @click="sqlparse" style="margin-top:4px">
                    <svg t="1595313817709" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1233" width="15" height="15"><path d="M512 0c-215.808 0-448 65.056-448 208l0 608c0 142.88 232.192 208 448 208s448-65.12 448-208l0-608c0-142.944-232.256-208-448-208zM896 816c0 79.488-171.936 144-384 144-212.096 0-384-64.512-384-144l0-119.552c66.112 68.128 225.6 103.552 384 103.552s317.888-35.424 384-103.552l0 119.552zM896 624l-0.128 0c0 0.32 0.128 0.672 0.128 0.992 0 79.008-171.936 143.008-384 143.008s-384-64-384-143.008c0-0.32 0.128-0.672 0.128-0.992l-0.128 0 0-119.552c66.112 68.128 225.6 103.552 384 103.552s317.888-35.424 384-103.552l0 119.552zM896 432l-0.128 0c0 0.32 0.128 0.672 0.128 0.992 0 79.008-171.936 143.008-384 143.008s-384-64-384-143.008c0-0.32 0.128-0.672 0.128-0.992l-0.128 0 0-109.952c83.872 63.904 237.6 93.952 384 93.952s300.128-30.048 384-93.952l0 109.952zM512 352c-212.096 0-384-64.512-384-144 0-79.552 171.904-144 384-144 212.064 0 384 64.448 384 144 0 79.488-171.936 144-384 144zM768 832c0-17.664 14.336-32 32-32s32 14.336 32 32c0 17.664-14.336 32-32 32s-32-14.336-32-32zM768 640c0-17.664 14.336-32 32-32s32 14.336 32 32c0 17.664-14.336 32-32 32s-32-14.336-32-32zM768 448c0-17.664 14.336-32 32-32s32 14.336 32 32c0 17.664-14.336 32-32 32s-32-14.336-32-32z" p-id="1234" fill="#999999"></path></svg>
                </span>
        </li>
        <li name="解析html" v-show="tools.html">
                <span @click="htmlparse" style="margin-top:4px">
                       <svg t="1595386097421" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4575" width="15" height="15"><path d="M202.666667 938.666667h618.666666a10.666667 10.666667 0 0 0 10.666667-10.666667V298.666667H650.666667c-17.642667 0-32-14.357333-32-32V85.333333H202.666667a10.666667 10.666667 0 0 0-10.666667 10.666667v832a10.666667 10.666667 0 0 0 10.666667 10.666667z" fill="#FFFFFF" p-id="4576"></path><path d="M827.584 277.333333L640 89.749333V266.666667a10.666667 10.666667 0 0 0 10.666667 10.666666h176.917333z" fill="#FFFFFF" p-id="4577"></path><path d="M843.957333 263.541333L653.792 73.376A31.765333 31.765333 0 0 0 631.168 64H202.666667c-17.642667 0-32 14.357333-32 32v832c0 17.642667 14.357333 32 32 32h618.666666c17.642667 0 32-14.357333 32-32V286.165333c0-8.533333-3.338667-16.576-9.376-22.624zM640 89.749333L827.584 277.333333H650.666667a10.666667 10.666667 0 0 1-10.666667-10.666666V89.749333zM821.333333 938.666667H202.666667a10.666667 10.666667 0 0 1-10.666667-10.666667V96a10.666667 10.666667 0 0 1 10.666667-10.666667h416v181.333334c0 17.642667 14.357333 32 32 32h181.333333v629.333333a10.666667 10.666667 0 0 1-10.666667 10.666667z" fill="#605E5C" opacity=".64" p-id="4578"></path><path d="M757.333333 757.333333H266.666667a10.666667 10.666667 0 1 1 0-21.333333h490.666666a10.666667 10.666667 0 1 1 0 21.333333z" fill="#C8C6C4" p-id="4579"></path><path d="M757.333333 821.333333H266.666667a10.666667 10.666667 0 1 1 0-21.333333h490.666666a10.666667 10.666667 0 1 1 0 21.333333z" fill="#C8C6C4" p-id="4580"></path></svg>
               </span>
        </li>
        <li :name="scrolling ? '同步滚动:开' : '同步滚动:关'">
                <span
                        @click="changedata('scrolling',false)"
                        v-show="scrolling"
                        class="iconfont icon-on"
                ></span>
            <span
                    @click="changedata('scrolling',true)"
                    v-show="!scrolling"
                    class="iconfont icon-off"
            ></span>
        </li>
        <li v-if="tools.split && split" name="全屏编辑">
            <span @click="changedata('split',false)"  class="iconfont icon-md"></span>
        </li>
        <li v-if="tools.split && !split" name="分屏显示">
            <span @click="changedata('split',true)" class="iconfont icon-group"></span>
        </li>
        <li v-if="tools.preview" name="预览">
                <span
                        @click="changedata('preview',true)"
                        class="iconfont icon-preview"
                ></span>
        </li>
        <li v-if="tools.clear" name="清空" >
            <span class="iconfont icon-clear" @click="clear"></span>
        </li>
        <li v-if="tools.save" name="保存" @click="handleSave">
            <span class="iconfont icon-save"></span>
        </li>
        <li v-if="tools.search" name="搜索" @click="handleSearch" >
            <span class="iconfont">
            <svg t="1595717959091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2030" width="13" height="13"><path d="M999.073 878.496L754.049 633.328c-2.856-2.856-6.056-5.032-9.032-7.312a402.928 402.928 0 0 0 65.488-220.72C810.617 181.512 629.249 0 405.361 0 181.481 0 0.001 181.504 0.001 405.304c0 223.912 181.48 405.304 405.248 405.304 81.488 0 157.144-24.24 220.8-65.608 2.288 3.08 4.456 6.168 7.2 8.912l245.024 245.056a85.064 85.064 0 0 0 60.344 25.032c21.824 0 43.656-8.344 60.344-24.92 33.368-33.256 33.368-87.32 0.112-120.584M405.369 682.704C252.457 682.704 128.001 558.24 128.001 405.304c0-152.816 124.456-277.288 277.36-277.288 152.92 0 277.256 124.472 277.256 277.4 0 152.816-124.456 277.288-277.248 277.288" p-id="2031" fill="#999999"></path></svg>
              </span>
        </li>
        <li name="保存到本地" v-show="tools.exportmd" class="download">
            <span class="iconfont icon-download" ></span>
            <ul class="hover_show">
                <li @click="exportFile">
                    <i>
                        <svg t="1595734036913" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5625" width="15" height="15"><path d="M354.40128 0c-87.04 0-157.44 70.55872-157.44 157.59872v275.68128H78.72c-21.6576 0-39.36256 17.69984-39.36256 39.36256v236.31872c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.24128v118.08256c0 87.04 70.4 157.59872 157.44 157.59872h472.63744c87.04 0 157.59872-70.55872 157.59872-157.59872V315.0336c0-41.74848-38.9888-81.93024-107.52-149.27872l-29.11744-29.12256L818.87744 107.52C751.5392 38.9888 711.39328 0 669.59872 0H354.4064z m0 78.72h287.20128c28.35456 7.0912 27.99616 42.1376 27.99616 76.8v120.16128c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.07744c39.38816 0 78.87872-0.0256 78.87872 39.36256v512c0 43.32032-35.55328 78.87872-78.87872 78.87872H354.4064c-43.32544 0-78.72-35.5584-78.72-78.87872v-118.08256h393.91744c21.66272 0 39.36256-17.69472 39.36256-39.35744V472.64256c0-21.66272-17.69984-39.36256-39.36256-39.36256H275.68128V157.59872c0-43.32032 35.39456-78.87872 78.72-78.87872zM195.9936 507.36128h32.64l49.92 143.03744h0.96256l48.95744-143.03744h33.60256v175.67744h-22.08256v-106.55744c0-10.88 0.32256-26.56256 0.96256-47.04256h-0.96256l-52.79744 153.6h-19.2l-52.80256-153.6h-0.95744c1.28 22.4 1.92 38.72256 1.92 48.96256v104.63744H195.9936V507.36128z m214.08256 0h48.95744c24.96 0 44.48256 7.68 58.56256 23.04 14.72 14.72 22.07744 35.84 22.07744 63.36 0 28.8-7.68 50.87744-23.04 66.23744-14.72 15.36-35.51744 23.04-62.39744 23.04h-44.16V507.36128z m22.07744 19.2v137.27744h19.2c21.76 0 37.76-5.76 48-17.28 10.88-11.52 16.32256-28.8 16.32256-51.84s-5.12-39.99744-15.36-50.87744c-9.6-11.52-24.32-17.28-44.16-17.28h-24.00256z" p-id="5626" fill="#999999"></path></svg>
                    </i>
                    导出 Markdown
                </li>
                <li @click="exportPdf">
                    <i>
                        <svg t="1595733959054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4728" width="15" height="15"><path d="M743.483311 0H109.01234A53.988777 53.988777 0 0 0 55.023562 53.988777v916.009591a53.988777 53.988777 0 0 0 53.988778 53.988778h805.97532a53.988777 53.988777 0 0 0 53.988778-53.988778V211.083265z m-10.913446 102.462987l149.201843 139.702389H732.569865zM137.292176 941.718532V82.268613h513.009076v242.165376h236.419427V941.718532z" p-id="4729" fill="#999999"></path><path d="M298.60293 437.86184h-83.258408v237.332094h57.09956v-78.785051h27.752802c50.132436 0 93.837637-24.886256 93.837637-81.343092-0.051418-58.693514-43.113895-77.203952-95.431591-77.203951z m-1.285447 113.569249h-24.873401v-68.591456h23.292301c27.431441 0 42.741115 8.303988 42.741115 32.226158 0 23.279447-13.394359 36.365298-41.147161 36.365298zM502.757635 437.86184H434.487541v237.332094h71.458003c69.221325 0 117.065666-37.277965 117.065666-119.932212s-47.84434-117.399882-120.253575-117.399882z m-3.50927 191.40307h-7.712683V483.160995h7.712683c38.280614 0 65.390693 15.631037 65.390693 72.100727s-27.110079 74.003189-65.390693 74.003188zM667.024918 675.193934h57.099559v-90.585456h81.02173v-47.535833h-81.02173v-51.996334h94.428943v-47.201617H667.024918v237.31924z" p-id="4730" fill="#999999"></path></svg>
                    </i>
                    导出 pdf
                </li>
            </ul>
        </li>

        <li class="empty"></li>
        <li v-if="tools.fullscreen && !fullscreen" name="全屏">
                <span
                        @click="changedata('fullscreen',!fullscreen)"
                        class="iconfont icon-fullscreen"
                ></span>
        </li>
        <li v-if="tools.fullscreen && fullscreen" name="退出全屏">
                <span
                        @click="changedata('fullscreen',!fullscreen)"
                        class="iconfont icon-quite"
                ></span>
        </li>
    </ul>
</template>

<script>
    import eventConfig from "../config/event";
    import defaultTools from "../config/tools";
    import alertConfig from "../config/alert";
    import {saveFile,savePdf} from "../utils";
    const html2md=require('html-to-md')
    const mammoth = require("mammoth");
    export default {
        name:"wk_tools",
        props:['toolbars','editor','preview','scrolling','fullscreen','split','lastPos','currentValue','exportFileName','vm'],
        data(){
            return{
                lastInsert:""
            }
        },
        computed: {
            tools() {
                const {toolbars = {}} = this;
                return {
                    ...defaultTools,
                    ...toolbars
                };
            }
        },
        methods: {
            handleSearch(){
                this.editor.execCommand('find') //触发
            },
            changedata(key,value){
                //更新父组件的值
                this.$emit(eventConfig.changeData,key,value)
                this.$forceUpdate() //强制更新视图
            },
            //以下为MD编辑器操作方法
            insertContent(str){
                this.editor.replaceSelection(str);
                this.lastInsert = str.replace(/\n/g, ''); //保存上一次插入的内容，去掉空格 这个功能用于 列表等操作按回车自增
            },
            setCursor(line = 0, ch = 0) {// 设置焦点
                const {editor} = this;  //设置游标 line是行 ch此行第几个字符
                editor.setCursor(line, ch); //游标更新
                editor.focus(); //触发focus 将更新的游标保存到lastPos中
            },
            insertStrong() {// 粗体
                const {editor, lastPos = {}} = this;
                const {line = 0, ch = 0} = lastPos;
                const selection = editor.getSelection(); //得到选中的值
                if (selection) { //如果有选中值则将选中值替换成 **' + 选中值 + '**'
                    this.insertContent('**' + selection + '**');
                } else {
                    this.insertContent('****');
                    this.setCursor(line, ch + 2); //如果没有则添加 **** 并且将光标右移2字符 方便书写内容
                }
            },
            insertItalic() {// 斜体
                const {editor, lastPos = {}} = this;  //和insertStrong原理一样
                const {line = 0, ch = 0} = lastPos;
                const selection = editor.getSelection();
                if (selection) {
                    this.insertContent('*' + selection + '*');
                } else {
                    this.insertContent('**');
                    this.setCursor(line, ch + 1);
                }
            },
            insertUnderline() {// 下划线
                const {editor, lastPos = {}} = this; //和insertStrong原理一样
                const {line = 0, ch = 0} = lastPos;
                const selection = editor.getSelection();
                if (selection) {
                    this.insertContent('<u>' + selection + '</u>');
                } else {
                    this.insertContent('<u></u>');
                    this.setCursor(line, ch + 3);
                }
            },
            insertOverline() {// 删除线
                const {editor, lastPos = {}} = this; //和insertStrong原理一样
                const {line = 0, ch = 0} = lastPos;
                const selection = editor.getSelection();
                if (selection) {
                    this.insertContent('~~' + selection + '~~');
                } else {
                    this.insertContent('~~~~');
                    this.setCursor(line, ch + 2);
                }
            },
            insertTitle(level) {// 插入标题
                const titles = {
                    1: '#  ',
                    2: '##  ',
                    3: '###  ',
                    4: '####  ',
                    5: '#####  ',
                    6: '######  '
                };
                const {editor, lastPos = {}} = this; //和insertStrong原理一样
                const {line} = lastPos;
                const selection = editor.getSelection();
                if (selection) {
                    this.insertContent('\n' + titles[level] + selection + '\n');
                } else {
                    const title = titles[level];
                    if (editor.isClean()) {  //判断是否是空文档 特殊处理
                        this.insertContent(title);
                        this.setCursor(0, title.length);
                    } else {
                        this.insertContent('\n' + title);
                        this.setCursor(line + 1, title.length);
                    }
                }
            },
            insertLine() {// 插入分割线
                const {editor} = this; //和insertStrong原理一样
                if (editor.isClean()) { //判断是否是空文档 特殊处理
                    this.insertContent('----\n');
                } else {
                    this.insertContent('\n\n----\n');
                }
            },
            insertQuote() {// 引用
                const {editor, lastPos = {}} = this; //和insertTitle原理一样
                const {line = 0} = lastPos;
                const selection = editor.getSelection();
                if (selection) {
                    this.insertContent('\n>  ' + selection + '\n\n');
                } else {
                    if (editor.isClean()) {
                        this.insertContent('>  ');
                        this.setCursor(0, 3);
                    } else {
                        this.insertContent('\n>  ');
                        this.setCursor(line + 1, 3);
                    }
                }
            },
            insertUl() {// 无序列表
                const {editor, lastPos = {}} = this;
                const {line = 0, ch = 0} = lastPos;
                const selection = editor.getSelection(); //和insertTitle原理一样
                if (selection) {
                    this.insertContent('\n-  ' + selection + '\n\n');
                } else {
                    if (editor.isClean() || ch === 0) { //此时不仅仅判断为空 还判断是否是一行的起始位置
                        this.insertContent('-  ');
                        this.setCursor(line, 3);
                    } else {
                        this.insertContent('\n-  ');
                        this.setCursor(line + 1, 3);
                    }
                }
            },
            insertOl() {// 有序列表
                const {editor, lastPos = {}} = this; //和insertUl原理一样
                const {line = 0, ch = 0} = lastPos;
                const selection = editor.getSelection();
                if (selection) {
                    this.insertContent('\n1.  ' + selection + '\n\n');
                } else {
                    if (editor.isClean() || ch === 0) {
                        this.insertContent('1.  ');
                        this.setCursor(line, 4);
                    } else {
                        this.insertContent('\n1.  ');
                        this.setCursor(line + 1, 4);
                    }
                }
            },
            insertFinished() {// 已完成列表
                const {editor, lastPos = {}} = this;  //和insertUl原理一样
                const {line = 0, ch = 0} = lastPos;
                const selection = editor.getSelection();
                if (selection) {
                    this.insertContent('\n- [x] ' + selection + '\n\n');
                } else {
                    if (editor.isClean() || ch === 0) {
                        this.insertContent('- [x] ');
                        this.setCursor(line, 6);
                    } else {
                        this.insertContent('\n- [x] ');
                        this.setCursor(line + 1, 6);
                    }
                }
            },
            insertNotFinished() {// 未完成列表
                const {editor, lastPos = {}} = this;  //和insertUl原理一样
                const {line = 0, ch = 0} = lastPos;
                const selection = editor.getSelection();
                if (selection) {
                    this.insertContent('\n- [ ] ' + selection + '\n\n');
                } else {
                    if (editor.isClean() || ch === 0) {
                        this.insertContent('- [ ] ');
                        this.setCursor(line, 6);
                    } else {
                        this.insertContent('\n- [ ] ');
                        this.setCursor(line + 1, 6);
                    }
                }
            },
            redo() {
                const {editor} = this;
                editor.redo();//重做编辑器
                setTimeout(() => {
                    editor.refresh(); //更新视图
                }, 20);
            },
            clear(){
                this.editor.setValue('')
            },

            //高级用法
            insertImage(url) {// 插入图片
                if(typeof url=='string'){

                    this.insertContent('\n![image]('+url+')');

                }else{

                    this.insertContent('\n![image](http://csdn.52wike.com/wike.jpeg)');
                }

            },
            handleSave() {// 保存操作
                const {currentValue, themeName, html} = this;
                this.$emit(eventConfig.save, {
                    theme: themeName,
                    value: currentValue,
                    html
                });
            },

            exportFile() {// 导出为.md格式
                saveFile(this.currentValue, this.exportFileName + '.md');
            },
            exportPdf(){
                savePdf(this.vm.html,this.exportFileName+ '.pdf')
            },
            importFile(e) {// 导入本地文件
                const file = e.target.files[0];
                if (!file) {
                    return;
                }
                if(!/^md$/ig.test(file.name.split('.').pop())){
                    alert('文件格式不对')
                    return;
                }
                const reader = new FileReader();
                reader.readAsText(file, {
                    encoding: 'utf-8'
                });
                reader.onload = () => {
                    e.target.value = '';
                    this.insertContent(reader.result)

                };
                reader.onerror = err => {
                    console.error(err);
                }
            },
            importDoc(e) {// 导入本地文件
                const file = e.target.files[0];
                try {
                    if(/^doc[x]?$/ig.test(file.name.split('.').pop())){
                        const reader = new FileReader();
                        reader.readAsArrayBuffer(file);
                        reader.onload = () => {
                            let data=reader.result;
                            mammoth.convertToHtml({arrayBuffer: data}).then((html)=>{
                                this.insertContent('\n'+html2md(html.value)+'\n');
                            })
                        };
                        reader.onerror = err => {
                            console.error(err);
                        }

                    }else {
                        alert('文件格式不对')
                    }
                }catch (e) {
                    console.log(e)
                }

            },
            chooseImage() {// 选择图片
                const input = document.createElement('input');
                input.type = 'file';
                input.accept = 'image/*';
                input.onchange = ()=>{
                    const files = input.files;
                    if(files[0]){
                        this.$emit(eventConfig.imageUpload, files[0]);
                        input.value = '';
                    }
                }
                input.click();
            },
            //以下为弹窗方法
            insertCode() {// 插入code
                const selection =this.editor.getSelection(); //代码弹窗
                this.vm.alert.show(alertConfig.code)
                this.$nextTick(()=>{
                    this.vm.alert.codeeditor.setValue(selection)
                    this.vm.alert.codeeditor.focus()
                    this.vm.alert.codeeditor.setCursor(0, 0)
                })

            },

            insertLink() {// 插入链接
                const selection =this.editor.getSelection(); //超链接弹窗
                this.vm.alert.show(alertConfig.href)
                this.$nextTick(()=>{
                    this.vm.alert.setValue('href_dialog_txt',selection);
                })

            },
            sqlparse(){
                this.vm.alert.show(alertConfig.sql)
            },
            htmlparse(){
                this.vm.alert.show(alertConfig.html)
            },
            insertTable(){
                this.vm.alert.show(alertConfig.table)
            },

        }

    }

</script>

<style scoped  lang="less">
    @import "../assets/font/iconfont.css";
    @import "../assets/css/theme";
    @import "../assets/css/light";
    @import "../assets/css/index";
    .download{
        position: relative;
        .hover_show{font-size: 14px;
            padding: 10px;
            margin:2px;
            margin-top:-2px;
            width:100%;
            border-radius: 6px;
            min-width: 160px;
            color: #bbb;
            line-height: 30px;
            display: none;
            position: absolute;
            z-index: 9999;
            background:#444;
            margin-top:5px;
            i{
                margin-top:3px;
                vertical-align: middle;
                margin-right:5px;
            }
        }
        &:hover{
            .hover_show{display: block}
        }
    }

</style>
